﻿<!DOCTYPE html>
<html lang="zh_CN">
<head>
<#--包含指令--->
<#include "../common/header.ftl"/>
    <link href="/js/plugins/treeview/bootstrap-treeview.min.css" type="text/css" rel="stylesheet">
    <script src="/js/plugins/treeview/bootstrap-treeview.min.js"></script>
    <script src="/js/common.js"></script>
    <script>
        //lazyLoad有两个,一个是节点属性(在domain里面配了,表示开启懒加载),一个是全局参数(在页面treeview方法里编写,表示触发懒加载的事件)
        $(function () {

            $.get("/region/listByParentId.do",{type:"tree"},function (data) {
                //按照treeview的格式返回
                $('#treeview1').treeview({
                    data: [{text:"全部地区", nodes:data}],
                    showTags:true, //显示标签
                    //懒加载事件,点击标签上的加号,会触发什么事件
                    lazyLoad:function (node){    //node是什么==>每个节点上的信息(id,text,tags..)
                        //发送ajax请求,带上当前点击的节点的id
                        $.get("/region/listByParentId.do",{parentId:node.id,type:"tree"},function(data){
                            //调用插件的方法来添加节点到父节点上
                            $("#treeview1").treeview('addNode',[data,node]);//第一个参数是子节点,第二个是父节点
                        });
                    },
                    //当有节点被选中的事件
                     onNodeSelected:function (event,node){
                         //发送ajax请求,带上当前点击的节点的id
                         $.get("/region/listByParentId.do",{parentId:node.id},function(data){
                             var temp="";//空字符串,下面循环叠加
                             //拼接数据表格
                             //遍历data,确定推荐还是取消推荐
                             $.each(data,function (index,ele) {
                                 //将ele转换成json字符串.拿去设置自定义属性,注意里面的parent是空的,需要自己设置
                                ele.parent={id:node.id,name:node.text};
                                 var json=JSON.stringify(ele);
                                 //推荐按钮的文本内容设置
                                 var commendHtml="设为推荐";
                                 if(ele.state==1){
                                     commendHtml="取消推荐";//如果有标签,就是推荐状态
                                 }
                                 temp+='<tr><td>'+(index+1)+'</td><td>'+ele.name+'</td>'+
                                 '<td><a href="javascript:void(0);" class="edit_Btn" data-json='+json+'>'+"修改"+'</a></td>'+
                                '<td><a href="javascript:void(0);" class="commend_Btn" data-json='+json+'>'+commendHtml+'</a></td></tr>';//一个表格行,里面俩数据加俩按钮
                             });
                             $("tbody").html(temp);

                             //修改按钮事件
                             $(".edit_Btn").click(function () {
                                 //拿到自定义的属性值
                                 var json2=$(this).data("json");
                                 //回显数据,当前景区的id,name,上级景区的id,name
                                 //清空模态框
                                 $("#editForm input").val("");
                                 $("#editForm input[name='name']").val(json2.name);
                                 $("#editForm input[name='id']").val(json2.id);
                                 $("#editForm input[name='parent.name']").val(json2.parent.name);
                                 $("#editForm input[name='parent.id']").val(json2.parent.id);
                                 //弹出模态框
                                 $("#regionModal").modal("show");
                             });

                             //推荐按钮事件
                             $(".commend_Btn").click(function () {
                                 //获取自定义属性的值
                                 var json3=$(this).data("json");
                                 var state;
                                 if(json3.state==0){
                                     state=1;
                                 }else{
                                     state=0;

                                 }
                                 //发送ajax请求去更新状态,参数:当前地址的id,当前要变成什么状态
                                 $.post("/region/changeState.do",{id:json3.id,state:state},function (data) {
                                     //回调函数
                                     $.messager.confirm("提示","是否确认修改",function(){
                                         window.location.reload();
                                     });
                                 });
                             });

                         });
                     }
                });
            });
            //新增功能模态框的显示,如果没有选择上级地区,会弹出警告框
            $(".inputBtn").click(function () {
                //第一步清空表格数据
                $("#editForm input").val("");
                //获取被选中的节点数组(插件的方法)
                var node= $('#treeview1').treeview('getSelected');
                if(node.length>0){
                    //说明已经选中,要回显数据,回显上级地区的名字和id
                    $("#editForm input[name='parent.name']").val(node[0].text);
                    $("#editForm input[name='parent.id']").val(node[0].id);
                }else{
                    $.messager.alert("温馨提示","还没选中上级地区呢,请选择要添加的上级地区");
                }
                $("#regionModal").modal("show");
            });
            //ajax提交表单
            //按钮是一个a标签
            //现将表单由同步变成异步
            $("#editForm").ajaxForm(function (data) {
                doSuccess();
               /* //回调函数
                $.messager.confirm("温馨提示","等待页面自动刷新",function () {
                    window.location.reload();
                });*/
            })
            $("#saveBtn").click(function () {
                $("#editForm").submit();
            });

        });
    </script>
</head>
<body>

<div class="container " style="margin-top: 20px">
   <#include "../common/top.ftl"/>
    <div class="row">
        <div class="col-sm-3">
        <#assign currentMenu = "region" />
				<#include "../common/menu.ftl" />
        </div>
        <div class="col-sm-9">
            <div class="row">
                <div class="col-sm-12">
                    <div class="page-header">
                         <h3>旅游地区管理</h3>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-sm-4">
                     <#--新增操作-->
                    <a role="button" class="btn btn-success inputBtn">
                        <span class="glyphicon glyphicon-plus"></span> 添加地区
                    </a>
                    <#--将treeview插在这里-->
                    <div id="treeview1"></div>
                </div>
                <div class="col-sm-8">
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>名称</th>
                        </tr>
                        </thead>
                        <tbody>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="regionModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">编辑/增加</h4>
            </div>
            <div class="modal-body">
                <form id="editForm" class="form-horizontal" method="post" action="/region/saveOrUpdate.do" >
                    <input id="regionId" type="hidden" name="id" value="" />
                    <div class="form-group">
                        <label class="col-sm-4 control-label">名称</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"  name="name" placeholder="地区/景区名称">
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-sm-4 control-label">上级地区</label>
                        <div class="col-sm-6">
                            <input type="text" class="form-control"  name="parent.name" readonly >
                            <input type="hidden" class="form-control"  name="parent.id" >
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <a href="javascript:void(0);" class="btn btn-success" id="saveBtn" aria-hidden="true">保存</a>
                <a href="javascript:void(0);" class="btn" data-dismiss="modal" aria-hidden="true">关闭</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>